<template>
  <view class="setup-container">
    <!-- 头部导航 -->
    <view class="header">
      <view class="back-btn" @click="goBack">←</view>
      <view class="title">完善个人信息</view>
      <view class="skip-btn" @click="skipSetup">跳过</view>
    </view>

    <!-- 欢迎区域 -->
    <view class="welcome-section">
      <view class="profile-icon">👤+</view>
      <view class="welcome-title">欢迎加入案源网</view>
      <view class="welcome-subtitle">请完成以下信息设置,以便更好地使用平台功能</view>
    </view>

    <!-- 信息表单 -->
    <view class="form-card">
      <!-- 姓名 -->
      <view class="form-item">
        <view class="label">姓名*</view>
        <input class="input" placeholder="请输入您的真实姓名" v-model="formData.name" />
      </view>

      <!-- 手机号码 -->
      <view class="form-item">
        <view class="label">手机号码*</view>
        <view class="phone-input">
          <input class="input" :value="maskedPhone" disabled />
          <text class="verified-text">已验证</text>
        </view>
      </view>

      <!-- 所属机构 -->
      <view class="form-item">
        <view class="label">所属机构*</view>
        <input class="input" placeholder="请输入您的所属律师事务所" v-model="formData.organization" />
      </view>

      <!-- 职业身份 -->
      <view class="form-item">
        <view class="label">职业身份*</view>
        <view class="identity-grid">
          <view 
            class="identity-option" 
            :class="{ active: formData.identity === 'practicing' }"
            @click="selectIdentity('practicing')"
          >
            执业律师
          </view>
          <view 
            class="identity-option" 
            :class="{ active: formData.identity === 'intern' }"
            @click="selectIdentity('intern')"
          >
            实习律师
          </view>
          <view 
            class="identity-option" 
            :class="{ active: formData.identity === 'assistant' }"
            @click="selectIdentity('assistant')"
          >
            律师助理
          </view>
          <view 
            class="identity-option" 
            :class="{ active: formData.identity === 'other' }"
            @click="selectIdentity('other')"
          >
            其他
          </view>
        </view>
      </view>

      <!-- 专业领域 -->
      <view class="form-item">
        <view class="label">专业领域*</view>
        <view class="field-input" @click="showFieldSelector">
          <text class="placeholder" v-if="formData.fields.length === 0">至少选择1个专业领域</text>
          <view class="selected-fields" v-else>
            <view 
              class="field-tag" 
              v-for="(field, index) in formData.fields" 
              :key="index"
              @click.stop="removeField(index)"
            >
              {{ field }} ×
            </view>
          </view>
        </view>
        <view class="field-hint">选择您擅长的专业领域,最多可选择3个</view>
      </view>
    </view>

    <!-- 确认按钮 -->
    <view class="confirm-btn" @click="confirmSetup">确认并进入</view>
  </view>
</template>

<script>
import { setCurrentUser, getCurrentUser } from '../../src/services/userService.js'

export default {
  data() {
    return {
      formData: {
        name: '',
        organization: '',
        identity: 'practicing',
        fields: []
      },
      maskedPhone: '138****5678',
      availableFields: [
        '合同纠纷', '知识产权', '劳动争议', '婚姻家庭', 
        '交通事故', '刑事辩护', '行政诉讼', '公司法务'
      ]
    }
  },
  onLoad() {
    const user = getCurrentUser()
    if (user) {
      this.maskedPhone = user.phone ? user.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : '138****5678'
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    skipSetup() {
      uni.reLaunch({ url: '/pages/cases/list' })
    },
    selectIdentity(identity) {
      this.formData.identity = identity
    },
    showFieldSelector(arg) {
      // WeChat action sheet allows up to 6 items; paginate to avoid silent failure
      const pageIndex = typeof arg === 'number' ? arg : 0
      if (this.formData.fields.length >= 3) {
        uni.showToast({ title: '最多选择3个领域', icon: 'none' })
        return
      }
      const remainingFields = this.availableFields.filter(field => !this.formData.fields.includes(field))
      if (remainingFields.length === 0) {
        uni.showToast({ title: '没有可选的领域', icon: 'none' })
        return
      }
      const pageSize = 5 // keep room for one navigation item to stay within 6
      const start = pageIndex * pageSize
      const pageItems = remainingFields.slice(start, start + pageSize)
      const hasNext = start + pageSize < remainingFields.length
      const itemList = [...pageItems]
      if (hasNext) {
        itemList.push('更多...')
      } else if (pageIndex > 0) {
        itemList.push('上一页')
      }
      uni.showActionSheet({
        itemList,
        success: (res) => {
          const tapped = itemList[res.tapIndex]
          if (tapped === '更多...') {
            this.showFieldSelector(pageIndex + 1)
            return
          }
          if (tapped === '上一页') {
            this.showFieldSelector(pageIndex - 1)
            return
          }
          if (tapped && this.formData.fields.length < 3) {
            this.formData.fields.push(tapped)
          }
        }
      })
    },
    removeField(index) {
      this.formData.fields.splice(index, 1)
    },
    confirmSetup() {
      // 验证必填字段
      if (!this.formData.name) {
        uni.showToast({ title: '请输入姓名', icon: 'none' })
        return
      }
      if (!this.formData.organization) {
        uni.showToast({ title: '请输入所属机构', icon: 'none' })
        return
      }
      if (this.formData.fields.length === 0) {
        uni.showToast({ title: '请至少选择一个专业领域', icon: 'none' })
        return
      }

      // 保存用户信息
      const user = getCurrentUser() || {}
      const updatedUser = {
        ...user,
        name: this.formData.name,
        organization: this.formData.organization,
        identity: this.formData.identity,
        fields: this.formData.fields,
        profileComplete: true
      }
      setCurrentUser(updatedUser)

      uni.showToast({ title: '信息保存成功', icon: 'success' })
      setTimeout(() => {
        uni.reLaunch({ url: '/pages/cases/list' })
      }, 500)
    }
  }
}
</script>

<style>
.setup-container {
  min-height: 100vh;
  background: #f7f8fa;
  padding: 0 24rpx;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 0;
  margin-bottom: 40rpx;
}

.back-btn, .skip-btn {
  font-size: 32rpx;
  color: #3b82f6;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1f2937;
}

.welcome-section {
  text-align: center;
  margin-bottom: 40rpx;
}

.profile-icon {
  width: 120rpx;
  height: 120rpx;
  background: #dbeafe;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  color: #1d4ed8;
  margin: 0 auto 24rpx;
}

.welcome-title {
  font-size: 40rpx;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 16rpx;
}

.welcome-subtitle {
  font-size: 28rpx;
  color: #6b7280;
  line-height: 1.5;
}

.form-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 32rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 32rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 28rpx;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16rpx;
}

.input {
  width: 100%;
  height: 88rpx;
  background: #f9fafb;
  border: 2rpx solid #e5e7eb;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #1f2937;
}

.phone-input {
  position: relative;
}

.verified-text {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24rpx;
  color: #6b7280;
}

.identity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
}

.identity-option {
  height: 80rpx;
  background: #f9fafb;
  border: 2rpx solid #e5e7eb;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #6b7280;
}

.identity-option.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

.field-input {
  min-height: 88rpx;
  background: #f9fafb;
  border: 2rpx solid #e5e7eb;
  border-radius: 8rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.placeholder {
  color: #9ca3af;
  font-size: 28rpx;
}

.selected-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.field-tag {
  background: #3b82f6;
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.field-hint {
  font-size: 24rpx;
  color: #6b7280;
  margin-top: 12rpx;
}

.confirm-btn {
  width: 100%;
  height: 88rpx;
  background: #3b82f6;
  color: #fff;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 40rpx;
}
</style>
